<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
        name="viewport">
  <meta content="ie=edge" http-equiv="X-UA-Compatible">
  <title>toolbox组件</title>
</head>
<body>
<!--创建一个echarts容器-->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
<!--导入echarts-->
<script src="./js/echarts.min.js"></script>
<script>
  // Echarts工具的6个公共组件包括title标题、tooltip提示框、toolbox工具栏、legend图例、dataZoom缩放控制、visualMap视觉映射。

  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));
  // 指定图表的配置项和数据
  var options = {
    title: {
      text: 'Echarts的title组件',
      subtext: '纯属虚构',
      textStyle: {
        color: 'red',
        fontSize: 20,
        textShadowColor: '#ddd',
        textShadowOffsetX: 10
      }
    },
    // 内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。
    toolbox: {
      show: true,
      // orient: 'vertical', // 垂直显示 toolbox
      orient: 'horizontal', // 水平显示 toolbox 默认
      itemSize: 20, // 工具栏 icon 的大小， 默认 15
      feature: {
        dataView: {show: true, readOnly: false},
        restore: {show: true},
        saveAsImage: {show: true},
        dataZoom: {show: true},
      }
    }
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(options);

</script>
</html>